<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <button @click="commit()">commit mutations</button>
    <button @click="dispatch()">dispatch actions</button>
    <button @click="todo()">commit mutations  in actions</button>
    <button @click="test()">test axios interceptors</button>
    <span>{{sum}}</span>
    <Async/>
  </div>

</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

import {mapMutations} from 'vuex'

import Async  from '@/components/AsyncComponent.vue';

export default {
  name: 'home',
  components: {
    HelloWorld,
    Async
  },
  computed:{
  	sum(){
  		return this.$store.state.count+10;
  	}
  },
  methods:{
  	/**
  	 * [commit description] 提交mutation
  	 */
  	commit(){
  		this.$store.commit('increment');
  		console.log(this.$store.state.count);
  	},
  	/**
  	 * [dispatch description] dispatch一个async的方法
  	 */
  	dispatch(){
  		this.$store.dispatch('asyncIncrement');
  	},
  	todo(){
  		this.$store.dispatch('asyncCount');

  	},
  	test(){

  		//使用全局封装的axios
  		//this.$axios.post('/api/msg',{age:28})
  			//.then(res=>console.log(res))
  			//.finally(()=>console.log('finally........'));

  		this.$axios.get('/api/todoget')
  			.then(res=>console.log(res));

  	}
    
  	/**
  	...mapMutations({
  		commit:'increment'
  	})
  	*/
  }
}
</script>
